<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>内容管理</el-breadcrumb-item>
                <el-breadcrumb-item>文章/视频评论</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="btnBox">
                <div>
                    <span>文章/视频：</span><el-select v-model="selectTopicId" placeholder="请选择文章/视频" size="small">
                        <el-option :label="item.baikeTitle" :value='item.baikeId' v-for="(item, index) in topicList"
                            :key="index"> </el-option>
                    </el-select>
                </div>
                <div>
                    <el-button size="small" icon="el-icon-search" @click="getList('search')">搜索</el-button>
                    <el-button size="small" icon="el-icon-refresh-right" @click="getList('res')">重置</el-button>
                </div>
                <div>
                    <el-button size="small" icon="el-icon-delete" @click="handle('0')">删除</el-button>
                </div>
                <div>
                    <el-button size="small" icon="el-icon-upload2" @click="toTop('0','',1)">置顶</el-button>
                </div>
                <div>
                    <el-button size="small" icon="el-icon-upload2" @click="downTop('0','',0)">取消置顶</el-button>
                </div>
            </div>
            <el-table :data="tableData" border style="width: 100%" height="626" @selection-change="selectChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <!-- <el-table-column prop="commentId" label="ID"  width="45"></el-table-column> -->
                <el-table-column prop="userId" label="评论用户ID" width="120"></el-table-column>
                <el-table-column prop="userName" label="评论用户" width="120"></el-table-column>
                <el-table-column prop="baikeTitle" label="文章/视频"></el-table-column>
                <el-table-column prop="commentDetail" label="评论内容"></el-table-column>
                <el-table-column prop="commentTime" label="评论时间"></el-table-column>
                <el-table-column label="是否置顶">
                    <template slot-scope="scope">
                    <el-tag v-if="scope.row.isTop" type="success">置顶</el-tag>
                    <el-tag v-else type="info">未置顶</el-tag>
                </template>
                </el-table-column>
                <el-table-column label="操作" width="400">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-delete"
                            @click="handle(scope.row.commentId)">删除</el-button>
                            <el-button size="small" icon="el-icon-delete"
                            @click="toTop('1',scope.row.commentId,1)">置顶</el-button>
                            <el-button size="small" icon="el-icon-delete"
                            @click="downTop('1',scope.row.commentId,0)">取消置顶</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[50, 100, 200]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
            </div>

        </el-card>

    </div>
</template>

<script>
import { listComment, listAllTopicOrVideo, deleteComment , setCommentTop} from '../../network/comment'
export default {
    data() {
        return {
            tableData: [

            ],
            pageSize: 50,
            pageNum: 1,
            totalNum: 0,
            addialogVisible: false,//弹窗

            selectTopicId: 0,// 选择的文章、视频

            topicList: [
            ],
            selectList: [],
        };
    },
    methods: {

        //   删除  置顶  取消置顶
        handle(obj) {
            if (obj == 0 && this.selectList.length == 0) {
                this.$message.warning('请选择要操作的数据')
                return
            }
            var ids = '';
            if (obj == 0) {
                this.selectList.forEach(item => {
                    ids += item.commentId + ",";
                })
            } else {
                ids = obj
            }
            this.$confirm('是否删除该评论?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteComment({
                    ids: ids,
                }).then(res => {
                    this.getList('search');
                })
            }).catch(() => {

            });
        },

        selectChange(val) {
            console.log(val);
            this.selectList = val
        },

        //  获取评论列表
        getList(flag) {
            console.log(flag);
            if (flag == 'search') {
                // 获取数据
                listComment({
                    size: this.pageSize,
                    page: this.pageNum,
                    topicId: this.selectTopicId
                }).then(res => {
                    console.log(res);
                    if (res.flag) {
                        this.tableData = res.data.list
                        this.totalNum = res.data.total
                    }
                });
            } else if (flag == 'res') {
                this.tableData = []
                this.selectTopicId = 0
                this.$message.success('已重置')
            }
        },
        listTopic() {
            listAllTopicOrVideo().then(res => {
                this.topicList = res.data;
                this.topicList.unshift({
                    baikeId: 0,
                    baikeTitle: '全部'
                })
            })
        },


        handleSizeChange(val) {
            this.pageSize = val;
            this.getList()
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getList()
        },
        toTop(falg,obj,type){
            if(falg=='0'){
                let ids = '';
                this.selectList.forEach(item => {
                    ids += item.commentId + ",";
                })
                setCommentTop({
                    ids:ids,
                    type : type
                }).then(res=>{
                    if(res.flag){
                        this.getList('search')
                    }
                })
            }else{
                setCommentTop({
                    ids:obj,
                    type : type
                }).then(res=>{
                    if(res.flag){
                        this.getList('search')
                    }
                })
            }
        },
        downTop(falg,obj,type){
            if(falg=='0'){
                let ids = '';
                this.selectList.forEach(item => {
                    ids += item.commentId + ",";
                })
                setCommentTop({
                    ids:ids,
                    type : type
                }).then(res=>{
                    if(res.flag){
                        this.getList('search')
                    }
                })
            }else{
                setCommentTop({
                    ids:obj,
                    type : type
                }).then(res=>{
                    if(res.flag){
                        this.getList('search')
                    }
                })
            }
        },
        getComment(){

        }
        

    },
    created() {
        this.getList('search');
        this.listTopic();
    },
    filters: {

    },
};
</script>

<style scoped></style>